<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
    //    window.onload = function(){
    //         var box = document.querySelector(".box");
    //         console.log(box);
    //    }

    </script>
    <style>
        .box{
            width: 5rem;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        // 浏览器事件 ：预定义和浏览器相关的事件 
        // 1.onload: html 和资源加载完毕会执行这个事件 ；
        // window.onload = function(){
        //     console.log("加载完毕");
            
        // }

        // var box = document.querySelector(".box");
        // console.log(box);
        // console.log( window);
        // window.onload = function(){
        //     console.log(111);
        // }
        
        // var obj = {
        //    name:"123"
        // }

        // 对象的下标不能重复；
        // obj.onload = function(){
        //     console.log(111);
        // }
        // obj.onload = function(){
        //     console.log(2222);
        // }
        // obj.onload = "111";
        // obj.onload = "222";
      
        // console.log(obj);



        // 2.onresize :浏览器尺寸放生变化的时候触发；
        // window.onresize = function(){
        //     console.log(1111);
        // }

        // onresize ： 自适应；
        // rem单位：根字体的大小  默认根字体大小16px
        // 10rem = 160px
        // 设置10rem = 全屏宽度；
        // 动态修改更字体的大小；  1000px = 10rem  * 根字体大小100px

        function changeFont(){
            var w = window.innerWidth;
            // console.log(w);
            // 保证 无论什么尺寸 大小都是10rem
            // 根字体大小 = w/10;
            var s = w/10;
            // 获取html元素；
            document.documentElement.style.fontSize = s+"px";
        }


        changeFont();

        window.onresize = function(){
            changeFont();
        }


    </script>
</body>
</html>